<!--  -->
<template>
  <div id="Nav">
    <div class="logo"><img src="@/assets/ink_logo.png" alt=""></div>
    <div class="nav">
      <ul>
        <li><a  @click="homeClick()">首页</a></li>
        <li><a >留言板</a></li>

        <li><a >下载</a></li>

        <li><a >时光机</a></li>

        <li><a >关于</a></li>
      </ul>
    </div>

    <div class="userpanel">
      <div class="search">
        <input type="text" placeholder="关键字" />
        <button>搜索</button>
      </div>
      <div class="user">
        <a class="login" href="">登录</a>
        /
        <a class="register" href="">注册</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      isAnime: false,
    };
  },

  components: {},

  computed: {},

  methods: {
    homeClick(){
      this.$bus.$emit("tohome")
    }
  },
};
</script>
<style lang="scss"  scoped>
@import "@/assets/scss/theme.scss";
.search{
  display: inline;
  padding-right: 20px ;
}
.user{
  display: inline;
}
li {
  padding-left: 5%;
  padding-right: 5%;
  // float: left;
  display: inline-block;
  // background-color: $main-background-color;
}
li>a {
  line-height: 50px;
  font-size: 18px;
  color: $font-color-black;
  display: block;
  border-bottom: 0;
}
ul {
  color: $font-color-black;
}
a:hover {
  color: black;
}
li:hover {
  background-color: $body-background-color;
}
#Nav {
  background-color: $main-background-color;
  width: 100%;
  height: 50px;
  position: fixed;
}
.nav {
  display: inline-block;
  //为错位的div指定基准线
  vertical-align: top;

  width: 60%;
  height: 50px;
}
.logo {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  width: 20%;
  vertical-align: top;
}
.userpanel {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  width: 20%;
}
</style>